import React, {useState} from "react";
import {Button, ListItem, makeStyles, Switch} from "@rn-vui/themed";
import OverLayer, {OverLayerHeader} from "../../components/OverLayer.tsx";
import {Text, View} from "react-native";
import {RootSiblingPortal} from "react-native-root-siblings";
import {useThemeColors} from "../../hooks/hooks.tsx";
import {NetworkInfo} from 'react-native-network-info';
import AsyncStorage from "@react-native-async-storage/async-storage";

const useStyles = makeStyles((theme) => ({
    container: {},
    row: {
        paddingHorizontal: 0
    },
    buttonItem: {
        flex: 1,
    },
    button: {
        paddingVertical: 20
    },
    overlayer: {
        width: 500
    },
}));

interface DialogSettingProps {

}

const DialogSetting = (props: DialogSettingProps, ref: any) => {
    const colors = useThemeColors();
    const styles = useStyles();
    const [visible, setVisible] = useState<boolean>(false);
    const [ip, setIp] = useState<string>('192.168.0.100');
    const [localIP, setLocalIP] = useState<string>('127.0.0.1');
    const [isHomeScreen, setIsHomeScreen] = useState<boolean>(true);
    const callback = React.useRef<any>();

    const onPressButton = () => {
        setVisible(false);
        AsyncStorage.setItem('serverip', ip);
        AsyncStorage.setItem('isHomeScreen', isHomeScreen.toString());
        callback.current?.({
            ip,
            localIP,
            isHomeScreen
        });
    }

    const getMyIP = () => {
        Promise.all([
            NetworkInfo.getIPV4Address(),
            AsyncStorage.getItem('serverip'),
            AsyncStorage.getItem('isHomeScreen')
        ]).then(values => {
            if (values[0]) setLocalIP(values[0]);
            if (values[1]) setIp(values[1]);
            setIsHomeScreen(values[2] === 'true');
        });
    }

    React.useImperativeHandle(ref, () => ({
        open: (cb: any) => {
            callback.current = cb;
            setVisible(true);
            getMyIP();
        },
        close: () => {
            setVisible(false);
        }
    }));

    if (!visible) {
        return null;
    }

    return (
        <RootSiblingPortal>
            <OverLayer overlayStyle={styles.overlayer} onBackdropPress={() => setVisible(false)}>
                <OverLayerHeader title={'设置'}/>
                <View style={styles.container}>
                    <ListItem containerStyle={styles.row} bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>本机IP</ListItem.Title>
                        </ListItem.Content>
                        <ListItem.Title>{localIP}</ListItem.Title>
                    </ListItem>
                    <ListItem containerStyle={styles.row} bottomDivider>
                        <ListItem.Content>
                            <ListItem.Title>设为主机</ListItem.Title>
                        </ListItem.Content>
                        <Switch value={isHomeScreen} onValueChange={setIsHomeScreen}/>
                    </ListItem>
                    {
                        !isHomeScreen ? (
                            <ListItem containerStyle={styles.row} bottomDivider>
                                <ListItem.Title>主机IP</ListItem.Title>
                                <ListItem.Content>
                                    <ListItem.Input
                                        placeholder={'IP'}
                                        defaultValue={ip}
                                        onChangeText={setIp}
                                    />
                                </ListItem.Content>
                            </ListItem>
                        ) : null
                    }
                    <ListItem containerStyle={{justifyContent: 'center'}}>
                        <Button
                            title={isHomeScreen ? '确定' : '连接'}
                            buttonStyle={{width: 200}}
                            onPress={onPressButton}
                        />
                    </ListItem>
                </View>
            </OverLayer>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(DialogSetting);
